<template>
	<view class="item_box" :class="[{'not_readed':!realtimeMonitorData.isRead}]" hover-class="clicked">
	  	<view class="info" @click.stop="enterEquipDetailInfo(realtimeMonitorData)">
			<view class="tit">
				
				<image v-if="isBad" class="alarm_level" src="../../static/img/alarm/device_bad.png" mode=""></image>
				<image v-else class="alarm_level" src="../../static/img/alarm/device.png" mode=""></image>
				<view class="flex_between_column">
					<view class="alarm_type " v-if="isBad">{{realtimeMonitorData.installDesc}}设备异常</view>
					<view class="alarm_type" v-else>
						
						{{realtimeMonitorData.alarmInspect || ''}}设备正常
					</view>
					<view class="tagBox" v-if="!isBad" :class="{normalTagBox:!isBad}">
						{{realtimeMonitorData.monitorValue}}
						<text>{{realtimeMonitorData.equipmentCode}}</text>
					</view>
					<view class="tagBox" v-else>
						<text>{{realtimeMonitorData.equipmentCode}}</text>
					</view>
				</view>
				
				<!-- <view class="alarm_level">
					{{realtimeMonitorData.equipmentCode}}
					<text class="not_readed" v-if="!realtimeMonitorData.isRead"></text>
				</view>
				<view class="alarm_type" @click.stop="enterMonitorData(realtimeMonitorData.alarmInspect)" >
					{{realtimeMonitorData.equipmentCode}}
					<image src="../../static/img/chart.png" mode=""></image>
					<text>甲烷：{{realtimeMonitorData.monitorValue ? realtimeMonitorData.monitorValue : '--'}}</text>
					<text>监测曲线</text>
				</view> -->
			</view>
				
			<view class="status_box" v-if="showStatus">
				<view class="normal" v-if="!realtimeMonitorData.equipStatus">正常运行</view>
				<template v-else>
					<!-- <view>{{realtimeMonitorData.equipStatus}}</view> -->
					<view v-for="item in equipStatus" :key='item'>{{item}}</view>
		<!-- 			<view v-if="realtimeMonitorDetailInfo.guard == '是'" >移动</view>
					<view v-if="realtimeMonitorDetailInfo.laserTimeout == '是'" >激光超时</view>
					<view v-if="realtimeMonitorDetailInfo.laseraAnomaly == '是'" >激光异常</view>
					<view v-if="realtimeMonitorDetailInfo.water == '是'" >浸水</view> -->
				</template>
			</view>
			
			<view class="info_box">
				<view class="label">
					<image src="../../static/img/alarm/time.png" mode=""></image>
				</view>
				<view class="value" v-if="realtimeMonitorData.monitorTime">{{realtimeMonitorData.monitorTime}}</view>
				<view class="value" v-else>暂无</view>
				
			</view>
			<view class="info_box">
				<view class="label">
					<image src="../../static/img/alarm/pos.png" mode=""></image>
				</view>
				<view class="value" v-if="realtimeMonitorData.installPos">{{realtimeMonitorData.installPos}}</view>
				<view class="value" v-else>暂无</view>
				
			</view>
			<!-- <view class="flex_around_row device_status_box"> -->
			<!-- 	<view class="flex_around_column">
					<text>{{realtimeMonitorDetailInfo.realdata}}</text>
					<text>甲烷(%VOL)</text>
				</view> -->
	<!-- 			<view class="flex_around_column">
					<text>{{realtimeMonitorData.voltage ? realtimeMonitorData.voltage : '--'}}</text>
					<text>电压(V)</text>
				</view>
				<view class="flex_around_column">
					<text>{{realtimeMonitorData.CSQ ? realtimeMonitorData.CSQ : '--'}}</text>
					<text>CSQ(dbm)</text>
				</view>
				<view class="flex_around_column">
					<text>{{realtimeMonitorData.temperature ? realtimeMonitorData.temperature : '--'}}</text>
					<text>温度(℃)</text>
				</view>
				<view class="flex_around_column">
					<text>{{realtimeMonitorData.humidity ? realtimeMonitorData.humidity : '--'}}</text>
					<text>湿度(%RH)</text>
				</view>
			</view> -->
			<!-- <view class="info_box">
				<view class="label">安装位置</view>
				<view class="value">{{realtimeMonitorData.installDesc}}</view>
			</view> -->
			<!-- <view> -->
				<!-- <view>{{realtimeMonitorData.monitorIndex.}}</view> -->
			<!-- </view> -->
		</view>
	<!-- 	<view @click="enterMonitorData(realtimeMonitorData.alarmInspect)" class="btn_box" >
		监测曲线
		</view> -->
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
export default {
	data() {
		return {
			showSkeleton:true,
			realtimeMonitorDetailInfo:null,
		};
	},
	props:{
		realtimeMonitorData:{
			type:Object,
			default:{
				alarmInspect:'',
				monitorValue:'--',
				monitorTime:'--',
				installPos:'--',
				voltage:'--',
				CSQ:'--',
				temperature:'--',
				humidity:'--'
			}
		},
		showStatus:{
			type:Boolean,
			default:false
		},
		isBad:{
			type:Boolean,
			default:true
		}
	},
	computed:{
		...mapState({
			userInfo: ({ user }) => user.userInfo,
		}),
		equipStatus(){
			if(this.realtimeMonitorData !==null &&this.realtimeMonitorData.equipStatus && this.realtimeMonitorData.equipStatus.length > 0){
				return this.realtimeMonitorData.equipStatus.split(',')
			}else{
				return 
			}
			 
		}
	},
	// mounted() {
	// 	console.log(this.realtimeMonitorData)
	// 	debugger
	// },
	methods: {
		enterMonitorData(alarmInspect){
			uni.navigateTo({
				url:`/pages/views/monitorCurve/monitorCurve?alarmInspect=${alarmInspect}`,
				// complete(data) {
				// 	console.log(data)
				// }
			})
		},
		enterEquipDetailInfo(data){
			//console.log('data',data)
			if(!data.isRead){
				this.$api.saveAlarmRead({
					userName: this.userInfo.nickName,
					infoId: data.equipId
				}).then(res => {
					uni.$emit('loginSuccess')
				})
			}
			uni.setStorage({
				key:'equipId',
				data:data.equipId
			})
			
			uni.setStorage({
				key:'realtimeMonitorDetail',
				data,
				success() {
					uni.removeStorage({
						key:'monitorDetail',
						success() {
							uni.switchTab({
								url:'/pages/tabbar/map/map'
							})
						}
					})
					
				}
			})
			uni.setStorage({
				key:'curMarkerId',
				data:data.markerId
			})
		},

	}
};
</script>

<style lang="scss" scoped>
.item_box{
	.tagBox{
		text{
			color: #F32B00;
			font-weight: bold;
		}
	}
}
.status_box{
	display: flex;
	height: 40rpx;
	margin-bottom: 10rpx;
	top: -20rpx;
	view{
		height: 30rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		padding: 0 10rpx;
		border-radius: 30rpx;
		background: rgb(255,231,231);
		color: rgb(255,96,92);
		margin-right: 20rpx;
	}
	.normal{
		background: rgb(228,245,236);
		color: rgb(85,191,135);
	}
}
.normalTagBox{
	text{
		color: rgb(85,191,135) !important;
	}
	
}

</style>
